<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title" style="margin-bottom: 15px">基础使用</text>
         <uv-scroll-list
            indicatorColor="#fff0f0"
            indicatorActiveColor="#f56c6c"
            @right="right"
            @left="left"
         >
            <view class="scroll-list" style="flex-direction: row">
               <view
                  class="scroll-list__goods-item"
                  v-for="(item, index) in goodsArr"
                  :key="index"
                  :class="[index === 9 && 'scroll-list__goods-item--no-margin-right']"
               >
                  <image
                     class="scroll-list__goods-item__image"
                     :src="`${goodsBaseUrl}${item.thumbnail}`"
                     mode=""
                  ></image>
                  <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
               </view>
               <view class="scroll-list__show-more" @tap="showMore">
                  <text class="scroll-list__show-more__text">查看更多</text>
                  <uv-icon name="arrow-leftward" color="#f56c6c" size="12"></uv-icon>
               </view>
            </view>
         </uv-scroll-list>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">多菜单扩展</text>
         <uv-scroll-list>
            <view class="scroll-list">
               <view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
                  <view
                     class="scroll-list__line__item"
                     v-for="(item1, index1) in item"
                     :key="index1"
                     :class="[
                        index1 === item.length - 1 && 'scroll-list__line__item--no-margin-right',
                     ]"
                  >
                     <image
                        class="scroll-list__line__item__image"
                        :src="`${menuBaseUrl}${item1.icon}`"
                     ></image>
                     <text class="scroll-list__line__item__text">{{ item1.name }}</text>
                  </view>
               </view>
            </view>
         </uv-scroll-list>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 响应式数据
const goodsBaseUrl = ref('https://cdn.uviewui.com/uview/goods/');
const menuBaseUrl = ref('https://cdn.uviewui.com/uview/menu/');

const goodsArr = ref([
   {
      price: '230.5',
      thumbnail: '1.jpg',
   },
   {
      price: '74.1',
      thumbnail: '2.jpg',
   },
   {
      price: '8457',
      thumbnail: '6.jpg',
   },
   {
      price: '1442',
      thumbnail: '5.jpg',
   },
   {
      price: '541',
      thumbnail: '2.jpg',
   },
   {
      price: '234',
      thumbnail: '3.jpg',
   },
   {
      price: '562',
      thumbnail: '4.jpg',
   },
   {
      price: '251.5',
      thumbnail: '1.jpg',
   },
]);

const menuArr = ref([
   [
      {
         name: '天猫新品',
         icon: '11.png',
      },
      {
         name: '今日爆款',
         icon: '9.png',
      },
      {
         name: '天猫国际',
         icon: '17.png',
      },
      {
         name: '饿了么',
         icon: '6.png',
      },
      {
         name: '天猫超市',
         icon: '11.png',
      },
      {
         name: '分类',
         icon: '2.png',
      },
      {
         name: '天猫美食',
         icon: '3.png',
      },
      {
         name: '阿里健康',
         icon: '12.png',
      },
      {
         name: '口碑生活',
         icon: '7.png',
      },
   ],
   [
      {
         name: '充值中心',
         icon: '4.png',
      },
      {
         name: '机票酒店',
         icon: '10.png',
      },
      {
         name: '金币庄园',
         icon: '18.png',
      },
      {
         name: '阿里拍卖',
         icon: '15.png',
      },
      {
         name: '淘宝吃货',
         icon: '16.png',
      },
      {
         name: '闲鱼',
         icon: '4.png',
      },
      {
         name: '会员中心',
         icon: '6.png',
      },
      {
         name: '造点新货',
         icon: '13.png',
      },
      {
         name: '土货鲜食',
         icon: '14.png',
      },
   ],
]);

// 方法
const showMore = () => {
   console.log('查看更多');
};

const left = () => {
   console.log('left');
};

const right = () => {
   console.log('right');
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';
.scroll-list {
   @include flex(column);

   &__goods-item {
      margin-right: 20px;

      &__image {
         width: 60px;
         height: 60px;
         border-radius: 4px;
      }

      &__text {
         color: #f56c6c;
         text-align: center;
         font-size: 12px;
         margin-top: 5px;
      }
   }

   &__show-more {
      background-color: #fff0f0;
      border-radius: 3px;
      padding: 3px 6px;
      @include flex(column);
      align-items: center;

      &__text {
         font-size: 12px;
         width: 12px;
         color: #f56c6c;
         line-height: 16px;
      }
   }

   &__line {
      @include flex;
      margin-top: 10px;

      &__item {
         margin-right: 15px;

         &__image {
            width: 61px;
            height: 48px;
         }

         &__text {
            margin-top: 5px;
            color: $uv-content-color;
            font-size: 12px;
            text-align: center;
         }

         &--no-margin-right {
            margin-right: 0;
         }
      }
   }
}
</style>
